import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:jump_scape/js_data/js_game.dart';
import 'package:jump_scape/js_ui/js_widget/js_image_view.dart';
import 'package:jump_scape/js_ui/js_widget/js_style.dart';

import '../../js_data/js_box/js_game_record.dart';
import '../../js_data/js_event.dart';

class JsRecordsActivity extends StatefulWidget {
  static const url = 'records';
  const JsRecordsActivity({super.key});

  @override
  State<StatefulWidget> createState() => _JsRecordsActivity();
}

class _JsRecordsActivity extends State<JsRecordsActivity> {
  final _controller = PageController(initialPage: 0);

  var _index = 0;
  @override
  void initState() {
    super.initState();
    JsEventManager.statPage(page: JsEventName.jsNameRecordSpring);
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => Future.value(false),
      child: Scaffold(
        body: Stack(
          children: [
            jsImage('assets/image/ic_records_bg.png', width: double.infinity, height: double.infinity, fit: BoxFit.cover),
            Padding(
              padding: EdgeInsets.only(top: ScreenUtil().statusBarHeight),
              child: Row(
                children: [
                  InkWell(
                    onTap: () {
                      if (Navigator.canPop(context)) {
                        Navigator.pop(context);
                      }
                    },
                    child: Container(
                      padding: EdgeInsets.fromLTRB(18.r, 15.r, 18.r, 0),
                      child: jsImage('assets/image/ic_finish.png', width: 64.r, height: 64.r),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: double.infinity,
              margin: EdgeInsets.fromLTRB(26.r, ScreenUtil().statusBarHeight + 46.r, 26.r, 0),
              clipBehavior: Clip.antiAlias,
              decoration: jsShapeRoundT(radius: 200.r, color: Colors.white),
              child: Column(
                children: [
                  jsImage('assets/gif/ic_records.gif', width: 164.r, fit: BoxFit.fitWidth),
                  SizedBox(height: 10.r),
                  Row(
                    children: [
                      SizedBox(width: 17.r),
                      tabButton(
                        icon: 'assets/image/ic_records_spring_s.png',
                        isSelected: _index == 0,
                        onTap: () {
                          if (_index != 0) {
                            _controller.jumpToPage(0);
                          }
                        },
                      ),
                      SizedBox(width: 15.r),
                      tabButton(
                        icon: 'assets/image/ic_records_winter_s.png',
                        isSelected: _index == 1,
                        onTap: () {
                          if (_index != 1) {
                            _controller.jumpToPage(1);
                          }
                        },
                      ),
                      SizedBox(width: 15.r),
                      tabButton(
                        icon: 'assets/image/ic_records_city_s.png',
                        isSelected: _index == 2,
                        onTap: () {
                          if (_index != 2) {
                            _controller.jumpToPage(2);
                          }
                        },
                      ),
                      SizedBox(width: 17.r),
                    ],
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 19.r),
                    margin: EdgeInsets.only(top: 24.r),
                    child: jsImage('assets/image/ic_records_line.png', width: double.infinity, fit: BoxFit.fitWidth),
                  ),
                  Expanded(
                    child: PageView.builder(
                      controller: _controller,
                      onPageChanged: (value) {
                        _index = value;
                        setState(() {});

                        if (value == 0) {
                          JsEventManager.statPage(page: JsEventName.jsNameRecordSpring);
                        } else if (value == 1) {
                          JsEventManager.statPage(page: JsEventName.jsNameRecordWinter);
                        } else {
                          JsEventManager.statPage(page: JsEventName.jsNameRecordCity);
                        }
                      },
                      itemCount: 3,
                      itemBuilder: (context, index) {
                        return RecordsPage(index: index);
                      },
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget tabButton({
    required String icon,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return Expanded(
      child: InkWell(
        child: Opacity(
          opacity: isSelected ? 1 : 0.4,
          child: Container(
            clipBehavior: Clip.antiAlias,
            decoration: jsShapeRound(radius: 12.r, shadows: [
              BoxShadow(offset: Offset(1.r, 1.r), blurRadius: 4.r, color: Color(0xFFC9C9C9)),
            ]),
            child: jsImage(icon, width: double.infinity, fit: BoxFit.fitWidth),
          ),
        ),
        onTap: () {
          onTap();
        },
      ),
    );
  }
}

class RecordsPage extends StatefulWidget {
  final int index;
  const RecordsPage({super.key, required this.index});
  @override
  State<StatefulWidget> createState() => _RecordsPage();
}

class _RecordsPage extends State<RecordsPage> {
  final List<GameRecordBox> _list = [];
  @override
  void initState() {
    super.initState();
    if (widget.index == 0) {
      JsGame().quaryGameRecord(gameType: 'Spring', call: onQuaryGameRecord);
    } else if (widget.index == 1) {
      JsGame().quaryGameRecord(gameType: 'Winter', call: onQuaryGameRecord);
    } else {
      JsGame().quaryGameRecord(gameType: 'City', call: onQuaryGameRecord);
    }
  }

  void onQuaryGameRecord(List<GameRecordBox> list) {
    if (!mounted) return;
    if (list.isEmpty) return;

    _list.clear();
    _list.addAll(list);

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (_list.isEmpty) {
      return Container(
        alignment: Alignment.topLeft,
        margin: EdgeInsets.only(left: 97.r, top: 47.r, right: 74.r),
        child: jsImage('assets/image/ic_records_nothing.png', width: double.infinity, fit: BoxFit.fitWidth),
      );
    }

    return ListView.separated(
      padding: EdgeInsets.fromLTRB(20.r, 22.r, 20.r, 20.r),
      itemCount: _list.length,
      itemBuilder: (context, index) {
        final box = _list[index];

        return Container(
          clipBehavior: Clip.antiAlias,
          decoration: jsShapeRound(radius: 8.r, shadows: [
            BoxShadow(offset: Offset(1.r, 1.r), blurRadius: 4.r, color: Color(0xFFC9C9C9)),
          ]),
          child: Stack(
            children: [
              jsImage('assets/image/ic_records_item.png', width: double.infinity, fit: BoxFit.fitWidth),
              Positioned(
                left: 13.r,
                right: 13.r,
                top: 0,
                bottom: 0,
                child: Row(
                  children: [
                    jsImage('assets/image/ic_records_time.png', width: 19.r, fit: BoxFit.fitWidth),
                    SizedBox(width: 15.r),
                    Container(
                      constraints: BoxConstraints(maxWidth: 80.r),
                      child: Text(box.member?.name ?? 'P$index', style: jsTextStyle(font: JsTextFont.RubikOne, fontColor: Colors.white, fontSize: 16.r)),
                    ),
                    Spacer(),
                    Text(box.formatCreateDate(), style: jsTextStyle(font: JsTextFont.RubikOne, fontColor: Colors.white, fontSize: 16.r)),
                    Spacer(),
                    Container(
                      constraints: BoxConstraints(maxWidth: 80.r),
                      child: Text('${box.time ~/ 1000} S ’‘', textAlign: TextAlign.end, style: jsTextStyle(font: JsTextFont.RubikOne, fontColor: Colors.white, fontSize: 16.r)),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return SizedBox(height: 20.r);
      },
    );
  }
}
